<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月球车轨道校准模拟器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            max-width: 900px;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }
        
        header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(77, 195, 255, 0.5);
        }
        
        h1 {
            color: #4dc3ff;
            text-shadow: 0 0 15px rgba(77, 195, 255, 0.8);
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        
        .subtitle {
            color: #aaddff;
            font-size: 1.2em;
        }
        
        .scene {
            display: none;
            flex-direction: column;
            align-items: center;
            animation: fadeIn 0.8s ease;
        }
        
        .active {
            display: flex;
        }
        
        .scene-background {
            width: 100%;
            height: 350px;
            background-color: #111;
            border-radius: 15px;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            border: 3px solid #4dc3ff;
            box-shadow: 0 0 20px rgba(77, 195, 255, 0.3);
        }
        
        .scene-background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .scene-content {
            width: 100%;
            padding: 20px;
            background: rgba(0, 30, 60, 0.8);
            border-radius: 15px;
            margin: 15px 0;
            border: 1px solid rgba(77, 195, 255, 0.3);
        }
        
        .task-title {
            color: #ffcc00;
            margin-bottom: 15px;
            font-size: 1.4em;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        .task-description {
            margin-bottom: 20px;
            line-height: 1.6;
            font-size: 1.1em;
        }
        
        .formula-container {
            background: rgba(0, 50, 100, 0.9);
            padding: 15px;
            border-radius: 12px;
            margin: 20px 0;
            text-align: center;
            font-size: 1.3em;
            border: 2px solid #4dc3ff;
            box-shadow: 0 0 15px rgba(77, 195, 255, 0.4);
        }
        
        .formula {
            color: #ffcc00;
            font-weight: bold;
        }
        
        .input-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 0;
        }
        
        .input-section label {
            margin-bottom: 12px;
            font-size: 1.2em;
            text-align: center;
        }
        
        .input-section input {
            padding: 12px 15px;
            width: 220px;
            border-radius: 8px;
            border: 2px solid #4dc3ff;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.2em;
            text-align: center;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }
        
        .input-section input:focus {
            outline: none;
            box-shadow: 0 0 10px rgba(77, 195, 255, 0.8);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .button {
            padding: 14px 30px;
            background: linear-gradient(45deg, #4dc3ff, #0066cc);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.2em;
            margin: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(77, 195, 255, 0.6);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .button:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 20px rgba(77, 195, 255, 0.9);
        }
        
        .button:active {
            transform: translateY(2px);
        }
        
        .feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            display: none;
            font-size: 1.2em;
        }
        
        .success {
            background: rgba(0, 200, 0, 0.3);
            border: 2px solid #00cc00;
            color: #00ff00;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
        }
        
        .failure {
            background: rgba(200, 0, 0, 0.3);
            border: 2px solid #ff3333;
            color: #ff6666;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
        }
        
        .summary {
            text-align: center;
            margin-top: 25px;
            padding: 20px;
            background: rgba(0, 50, 100, 0.9);
            border-radius: 15px;
            border: 2px solid #4dc3ff;
        }
        
        .summary h2 {
            color: #ffcc00;
            margin-bottom: 20px;
            font-size: 2em;
        }
        
        .summary-stats {
            display: flex;
            justify-content: space-around;
            margin: 25px 0;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .stat-value {
            font-size: 2.5em;
            color: #4dc3ff;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(77, 195, 255, 0.7);
        }
        
        .stat-label {
            font-size: 1.2em;
            margin-top: 10px;
            color: #aaddff;
        }
        
        .result-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
            animation: fadeIn 0.5s ease;
        }
        
        .result-image {
            max-width: 80%;
            max-height: 80%;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
        }
        
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.5em;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .instructions {
            background: rgba(0, 30, 60, 0.8);
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
            line-height: 1.6;
            border: 1px solid rgba(77, 195, 255, 0.3);
        }
        
        .instructions h3 {
            color: #ffcc00;
            margin-bottom: 15px;
            font-size: 1.4em;
            text-align: center;
        }
        
        .instructions ul {
            margin-left: 20px;
            margin-top: 10px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        .hint {
            color: #aaddff;
            font-style: italic;
            margin-top: 10px;
            text-align: center;
        }
        
        .progress-bar {
            width: 100%;
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #4dc3ff, #0066cc);
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .scene-counter {
            text-align: right;
            color: #aaddff;
            font-size: 1.1em;
            margin-bottom: 10px;
        }
        
        /* 视频播放器样式 */
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 20px 0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(77, 195, 255, 0.5);
            position: relative;
        }
        
        .intro-video {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .video-controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
        }
        
        /* 开场场景样式 */
        .intro-scene {
            text-align: center;
            padding: 30px;
        }
        
        .intro-title {
            color: #ffcc00;
            margin-bottom: 20px;
            font-size: 2em;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        .intro-description {
            margin-bottom: 30px;
            font-size: 1.2em;
            line-height: 1.6;
        }
        
        /* 视频结束提示 */
        .video-end-message {
            margin-top: 20px;
            padding: 15px;
            background: rgba(0, 50, 100, 0.8);
            border-radius: 10px;
            border: 2px solid #4dc3ff;
            text-align: center;
            animation: pulse 2s infinite;
        }
        
        /* 音量控制按钮 */
        .volume-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        /* 弧度制按钮容器 */
        .radians-button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            width: 100%;
        }
        
        /* 工程师编号输入界面 */
        .engineer-id-scene {
            text-align: center;
            padding: 30px;
        }
        
        .engineer-id-title {
            color: #ffcc00;
            margin-bottom: 20px;
            font-size: 2em;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        .engineer-id-description {
            margin-bottom: 30px;
            font-size: 1.2em;
            line-height: 1.6;
        }
        
        /* 任务结算界面 */
        .task-summary {
            background: rgba(0, 30, 60, 0.8);
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
            line-height: 1.6;
            border: 1px solid rgba(77, 195, 255, 0.3);
        }
        
        .task-summary h3 {
            color: #ffcc00;
            margin-bottom: 15px;
            font-size: 1.4em;
            text-align: center;
        }
        
        .task-result {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(0, 50, 100, 0.6);
        }
        
        .task-info {
            flex: 1;
        }
        
        .task-answer {
            flex: 1;
            text-align: right;
        }
        
        .correct-answer {
            color: #00ff00;
        }
        
        .incorrect-answer {
            color: #ff6666;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        /* 最终结算任务对比 */
        .final-tasks-comparison {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin: 25px 0;
        }
        
        .final-task-card {
            background: rgba(0, 50, 100, 0.8);
            padding: 15px;
            border-radius: 12px;
            border: 2px solid #4dc3ff;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease;
        }
        
        .final-task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 20px rgba(77, 195, 255, 0.6);
        }
        
        .final-task-number {
            font-size: 1.8em;
            color: #ffcc00;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        .final-task-info {
            text-align: center;
            margin-bottom: 15px;
            line-height: 1.6;
            font-size: 0.95em;
        }
        
        .final-task-formula {
            background: rgba(0, 30, 60, 0.9);
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            font-size: 0.9em;
            text-align: center;
            width: 100%;
        }
        
        .final-answer-row {
            width: 100%;
            margin: 8px 0;
            text-align: center;
        }
        
        .final-answer-label {
            color: #aaddff;
            font-size: 0.9em;
            margin-bottom: 3px;
        }
        
        .final-answer-value {
            font-size: 1.3em;
            font-weight: bold;
            margin-top: 3px;
        }
        
        .comparison-title {
            color: #ffcc00;
            font-size: 1.6em;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        /* 响应式设计 - 小屏幕上改为2列 */
        @media (max-width: 768px) {
            .final-tasks-comparison {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            
            .final-task-card {
                padding: 12px;
            }
            
            .final-task-number {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1><i class="fas fa-rocket"></i> 月球车轨道校准模拟器</h1>
        <p class="subtitle">帮助月球车通过陨石坑</p>
    </header>
    
    <div class="container">
        <div class="scene-counter">任务进度: <span id="progress-text">0/5</span></div>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <!-- 工程师编号输入场景 -->
        <div id="engineerIdScene" class="scene active">
            <div class="engineer-id-scene">
                <h2 class="engineer-id-title">工程师身份验证</h2>
                <p class="engineer-id-description">
                    请输入您的工程师编号以开始任务
                </p>
                
                <div class="input-section">
                    <label for="engineerId">工程师编号</label>
                    <input type="text" id="engineerId" placeholder="请输入您的编号">
                    <button class="button" onclick="verifyEngineerId()">
                        <i class="fas fa-play"></i> 开始任务
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 开场场景 -->
        <div id="introScene" class="scene">
            <div class="intro-scene">
                <h2 class="intro-title">欢迎来到月球车轨道校准模拟器</h2>
                <p class="intro-description">
                    在这个任务中，你将扮演一名月球车工程师，使用数学知识帮助月球车安全通过陨石坑。
                    <br>请观看介绍视频了解任务背景。
                </p>
                
                <div class="video-container">
                    <!-- 修改1：移除muted属性，视频现在有声音 -->
                    <video class="intro-video" id="introVideo" autoplay>
                        <source src="intro_video.mp4" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                    <!-- 添加音量控制按钮 -->
                    <button class="volume-btn" id="volumeBtn" onclick="toggleVolume()">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                
                <div id="videoEndMessage" class="video-end-message" style="display: none;">
                    <h3><i class="fas fa-check-circle"></i> 视频播放完毕</h3>
                    <p>点击下方按钮开始任务</p>
                </div>
                
                <div class="video-controls">
                    <button class="button" id="replayButton" onclick="replayVideo()">
                        <i class="fas fa-redo"></i> 开始播放
                    </button>
                    <button class="button" id="startButton" style="display: none;" onclick="startGame()">
                        <i class="fas fa-play"></i> 开始任务
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 场景一 -->
        <div id="scene1" class="scene">
            <div class="scene-background" id="scene1-bg">
                <!-- 请将下面的URL替换为您的GIF动图URL -->
                <img src="background_2.gif" alt="月球场景1">
            </div>
            <div class="scene-content">
                <div class="task-title">【任务一：初次校准（小半径坑）】</div>
                <div class="task-description">
                    <p><i class="fas fa-info-circle"></i> 场景：月球车面对一个半径为1米的小型陨石坑。</p>
                    <p><i class="fas fa-road"></i> 指令：需要让车沿坑边行驶一段3米长的弧线。</p>
                </div>
                <div class="formula-container">
                    <div class="formula">弧长公式：$$l = \frac{n\pi r}{180}$$</div>
                </div>
                <div class="input-section">
                    <label for="angle1">请根据弧长公式计算圆心角 n 是多少度？</label>
                    <input type="number" id="angle1" step="0.1" placeholder="输入角度值">
                    <button class="button" onclick="checkAnswer(1)"><i class="fas fa-check-circle"></i> 轨道校准</button>
                </div>
                <div id="feedback1" class="feedback"></div>
            </div>
        </div>
        
        <!-- 场景二 -->
        <div id="scene2" class="scene">
            <div class="scene-background" id="scene2-bg">
                <!-- 请将下面的URL替换为您的GIF动图URL -->
                <img src="background_2.gif" alt="月球场景2">
            </div>
            <div class="scene-content">
                <div class="task-title">【任务二：挑战升级（大半径坑）】</div>
                <div class="task-description">
                    <p><i class="fas fa-info-circle"></i> 场景：月球车面前出现一个半径为5米的大型陨石坑。</p>
                    <p><i class="fas fa-road"></i> 指令：同样需要行驶一段3米长的弧线。</p>
                </div>
                <div class="formula-container">
                    <div class="formula">弧长公式：$$l = \frac{n\pi r}{180}$$</div>
                </div>
                <div class="input-section">
                    <label for="angle2">请再次使用弧长公式，计算新的圆心角 n。</label>
                    <input type="number" id="angle2" step="0.1" placeholder="输入角度值">
                    <button class="button" onclick="checkAnswer(2)"><i class="fas fa-check-circle"></i> 轨道校准</button>
                </div>
                <div id="feedback2" class="feedback"></div>
                <div class="hint">提示：注意半径变化对圆心角的影响</div>
            </div>
        </div>
        
        <!-- 任务一和任务二结算界面 -->
        <div id="task12Summary" class="scene">
            <div class="scene-content">
                <div class="task-title">任务一和任务二完成总结</div>
                <div class="task-summary">
                    <h3><i class="fas fa-chart-bar"></i> 任务结果</h3>
                    <div id="task1Result" class="task-result">
                        <div class="task-info">
                            <strong>任务一：</strong> 小半径坑 (r=1m, l=3m)
                        </div>
                        <div class="task-answer">
                            您的答案: <span id="userAnswer1"></span><br>
                            正确答案: <span id="correctAnswer1" class="correct-answer"></span>
                        </div>
                    </div>
                    <div id="task2Result" class="task-result">
                        <div class="task-info">
                            <strong>任务二：</strong> 大半径坑 (r=5m, l=3m)
                        </div>
                        <div class="task-answer">
                            您的答案: <span id="userAnswer2"></span><br>
                            正确答案: <span id="correctAnswer2" class="correct-answer"></span>
                        </div>
                    </div>
                    <div class="hint">点击下方按钮继续学习弧度制</div>
                </div>
                <div class="input-section">
                    <button class="button" onclick="continueToRadians()">
                        <i class="fas fa-arrow-right"></i> 继续任务
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 场景三 -->
        <div id="scene3" class="scene">
            <div class="scene-content">
                <div class="task-title">弧度制轨道校准系统</div>
                <div class="instructions">
                    <h3><i class="fas fa-cogs"></i> 关于弧度制</h3>
                    <p>弧度是另一种角度度量单位，定义为弧长与半径的比值。</p>
                    <div class="formula-container">
                        <div class="formula">弧度制公式：$$\alpha = \frac{l}{r}$$</div>
                    </div>
                    
                    <p>使用弧度制可以简化许多数学计算，特别是在高等数学和物理学中。</p>
                    <ul>
                        <li>当弧长等于半径时，圆心角为1弧度</li>
                        <li>一个完整的圆周是 \(2\pi\) 弧度</li>
                        <li>弧度制下，弧长公式更加简洁</li>
                    </ul>
                </div>
                <!-- 修改2：使用专门的容器确保按钮居中 -->
                <div class="radians-button-container">
                    <button class="button" onclick="switchToRadians()">
                        <i class="fas fa-play-circle"></i> 启用"弧度制轨道校准系统"
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 场景四 -->
        <div id="scene4" class="scene">
            <div class="scene-background" id="scene4-bg">
                <!-- 请将下面的URL替换为您的GIF动图URL -->
                <img src="background_2.gif" alt="月球场景3">
            </div>
            <div class="scene-content">
                <div class="task-title">【任务三：校对升级（小半径坑）】</div>
                <div class="task-description">
                    <p><i class="fas fa-info-circle"></i> 场景：月球车面对一个半径为1米的小型陨石坑。</p>
                    <p><i class="fas fa-road"></i> 指令：需要让车沿坑边行驶一段3米长的弧线。</p>
                </div>
                <div class="formula-container">
                    <div class="formula">弧度制公式：$$\alpha = \frac{l}{r}$$</div>
                </div>
                <div class="input-section">
                    <label for="angle3">请根据弧度制公式，计算出圆心角 α 是多少弧度？</label>
                    <input type="number" id="angle3" step="0.1" placeholder="输入弧度值">
                    <button class="button" onclick="checkAnswer(3)"><i class="fas fa-check-circle"></i> 轨道校准</button>
                </div>
                <div id="feedback3" class="feedback"></div>
                <div class="hint">提示：使用弧度制公式，计算更加直接</div>
            </div>
        </div>
        
        <!-- 场景五 -->
        <div id="scene5" class="scene">
            <div class="scene-background" id="scene5-bg">
                <!-- 请将下面的URL替换为您的GIF动图URL -->
                <img src="background_2.gif" alt="月球场景4">
            </div>
            <div class="scene-content">
                <div class="task-title">【任务四：校对升级（大半径坑）】</div>
                <div class="task-description">
                    <p><i class="fas fa-info-circle"></i> 场景：月球车面对一个半径为5米的大型陨石坑。</p>
                    <p><i class="fas fa-road"></i> 指令：需要让车沿坑边行驶一段3米长的弧线。</p>
                </div>
                <div class="formula-container">
                    <div class="formula">弧度制公式：$$\alpha = \frac{l}{r}$$</div>
                </div>
                <div class="input-section">
                    <label for="angle4">请根据弧度制公式，计算出圆心角 α 是多少弧度？</label>
                    <input type="number" id="angle4" step="0.1" placeholder="输入弧度值">
                    <button class="button" onclick="checkAnswer(4)"><i class="fas fa-check-circle"></i> 轨道校准</button>
                </div>
                <div id="feedback4" class="feedback"></div>
                <div class="hint">提示：使用弧度制公式，计算更加直接</div>
            </div>
        </div>
        
        <!-- 总结场景 -->
        <div id="summaryScene" class="scene">
            <div class="summary">
                <h2><i class="fas fa-trophy"></i> 任务完成总结</h2>
                <div class="summary-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="completedTasks">0/4</div>
                        <div class="stat-label">完成任务</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="accuracyRate">0%</div>
                        <div class="stat-label">正确率</div>
                    </div>
                </div>
                
                <!-- 任务对比分析 -->
                <h3 class="comparison-title"><i class="fas fa-chart-line"></i> 任务结果对比分析</h3>
                <div class="final-tasks-comparison">
                    <!-- 任务一 -->
                    <div class="final-task-card">
                        <div class="final-task-number">任务一</div>
                        <div class="final-task-info">
                            <strong>小半径坑</strong><br>
                            半径: 1m<br>
                            弧长: 3m
                        </div>
                        <div class="final-task-formula">
                            角度制<br>
                            $$l = \frac{n\pi r}{180}$$
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">正确答案</div>
                            <div class="final-answer-value correct-answer" id="finalCorrect1">172°</div>
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">您的答案</div>
                            <div class="final-answer-value" id="finalUser1">--</div>
                        </div>
                    </div>
                    
                    <!-- 任务二 -->
                    <div class="final-task-card">
                        <div class="final-task-number">任务二</div>
                        <div class="final-task-info">
                            <strong>大半径坑</strong><br>
                            半径: 5m<br>
                            弧长: 3m
                        </div>
                        <div class="final-task-formula">
                            角度制<br>
                            $$l = \frac{n\pi r}{180}$$
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">正确答案</div>
                            <div class="final-answer-value correct-answer" id="finalCorrect2">34.4°</div>
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">您的答案</div>
                            <div class="final-answer-value" id="finalUser2">--</div>
                        </div>
                    </div>
                    
                    <!-- 任务三 -->
                    <div class="final-task-card">
                        <div class="final-task-number">任务三</div>
                        <div class="final-task-info">
                            <strong>小半径坑</strong><br>
                            半径: 1m<br>
                            弧长: 3m
                        </div>
                        <div class="final-task-formula">
                            弧度制<br>
                            $$\alpha = \frac{l}{r}$$
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">正确答案</div>
                            <div class="final-answer-value correct-answer" id="finalCorrect3">3 rad</div>
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">您的答案</div>
                            <div class="final-answer-value" id="finalUser3">--</div>
                        </div>
                    </div>
                    
                    <!-- 任务四 -->
                    <div class="final-task-card">
                        <div class="final-task-number">任务四</div>
                        <div class="final-task-info">
                            <strong>大半径坑</strong><br>
                            半径: 5m<br>
                            弧长: 3m
                        </div>
                        <div class="final-task-formula">
                            弧度制<br>
                            $$\alpha = \frac{l}{r}$$
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">正确答案</div>
                            <div class="final-answer-value correct-answer" id="finalCorrect4">0.6 rad</div>
                        </div>
                        <div class="final-answer-row">
                            <div class="final-answer-label">您的答案</div>
                            <div class="final-answer-value" id="finalUser4">--</div>
                        </div>
                    </div>
                </div>
                
                <p style="margin-top: 20px;">恭喜你完成了所有任务！</p>
                <p>数学知识是探索宇宙的重要工具，继续加油！</p>
                <button class="button" onclick="restartGame()"><i class="fas fa-redo"></i> 重新开始游戏</button>
            </div>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div class="result-overlay" id="resultOverlay">
        <img class="result-image" id="resultImage" src="" alt="结果">
        <button class="close-btn" onclick="closeResult()"><i class="fas fa-times"></i></button>
    </div>

    <script>
        // 正确答案
        const correctAnswers = {
            1: 172,      // 任务一：小半径坑，角度制
            2: 34.4,     // 任务二：大半径坑，角度制
            3: 3,        // 任务三：小半径坑，弧度制
            4: 0.6       // 任务四：大半径坑，弧度制
        };
        
        // 用户答案记录
        const userAnswers = {
            1: null,
            2: null,
            3: null,
            4: null
        };
        
        // 当前场景
        let currentScene = 0; // 0表示工程师编号输入场景
        // 完成任务数
        let completedTasks = 0;
        // 正确任务数
        let correctTasks = 0;
        // 音量状态
        let isMuted = false;
        
        // 初始化游戏
        function initGame() {
            // 更新进度条
            updateProgress();
            
            // 设置视频自动播放
            const video = document.getElementById('introVideo');
            const startButton = document.getElementById('startButton');
            const videoEndMessage = document.getElementById('videoEndMessage');
            
            // 视频播放结束事件
            video.addEventListener('ended', function() {
                videoEndMessage.style.display = 'block';
                startButton.style.display = 'flex';
            });
            
            // 如果视频加载失败，直接显示开始按钮
            video.addEventListener('error', function() {
                videoEndMessage.style.display = 'block';
                startButton.style.display = 'flex';
                videoEndMessage.innerHTML = '<h3><i class="fas fa-exclamation-triangle"></i> 视频加载失败</h3><p>点击下方按钮开始任务</p>';
            });
        }
        
        // 验证工程师编号
        function verifyEngineerId() {
            const engineerId = document.getElementById('engineerId').value.trim();
            
            if (engineerId === '') {
                alert('请输入工程师编号');
                return;
            }
            
            // 切换到开场场景
            document.getElementById('engineerIdScene').classList.remove('active');
            document.getElementById('introScene').classList.add('active');
            currentScene = -1; // 开场场景的特殊标识
            updateProgress();
        }
        
        // 切换音量
        function toggleVolume() {
            const video = document.getElementById('introVideo');
            const volumeBtn = document.getElementById('volumeBtn');
            
            isMuted = !isMuted;
            video.muted = isMuted;
            
            if (isMuted) {
                volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
            } else {
                volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
            }
        }
        
        // 重新播放视频
        function replayVideo() {
            const video = document.getElementById('introVideo');
            const startButton = document.getElementById('startButton');
            const videoEndMessage = document.getElementById('videoEndMessage');
            
            video.currentTime = 0;
            video.play();
            startButton.style.display = 'none';
            videoEndMessage.style.display = 'none';
        }
        
        // 开始游戏
        function startGame() {
            document.getElementById('introScene').classList.remove('active');
            currentScene = 1;
            document.getElementById('scene1').classList.add('active');
            updateProgress();
        }
        
        // 检查答案
        function checkAnswer(taskNumber) {
            const inputElement = document.getElementById(`angle${taskNumber}`);
            const feedbackElement = document.getElementById(`feedback${taskNumber}`);
            
            const userAnswer = parseFloat(inputElement.value);
            const correctAnswer = correctAnswers[taskNumber];
            
            // 保存用户答案
            userAnswers[taskNumber] = userAnswer;
            
            // 允许一定的误差范围
            const tolerance = 0.1;
            const isCorrect = Math.abs(userAnswer - correctAnswer) < tolerance;
            
            if (isCorrect) {
                feedbackElement.textContent = "校准成功！月球车顺利通过！";
                feedbackElement.className = "feedback success";
                
                // 显示成功图片
                showResultImage('success');
                
                correctTasks++;
            } else {
                feedbackElement.textContent = "校准失败！请重新计算。";
                feedbackElement.className = "feedback failure";
                
                // 显示失败图片
                showResultImage('failure');
            }
            
            feedbackElement.style.display = "block";
            completedTasks++;
            
            // 2秒后进入下一场景
            setTimeout(() => {
                if (taskNumber === 1) {
                    // 任务一完成后直接进入任务二
                    nextScene(taskNumber);
                } else if (taskNumber === 2) {
                    // 任务二完成后显示任务一和任务二结算界面
                    showTask12Summary();
                } else if (taskNumber === 3) {
                    // 任务三完成后进入任务四
                    nextScene(taskNumber);
                } else if (taskNumber === 4) {
                    // 任务四完成后显示总结
                    showSummary();
                }
            }, 2000);
        }
        
        // 显示任务一和任务二结算界面
        function showTask12Summary() {
            document.getElementById('scene2').classList.remove('active');
            document.getElementById('task12Summary').classList.add('active');
            
            // 显示用户答案和正确答案
            document.getElementById('userAnswer1').textContent = userAnswers[1] !== null ? userAnswers[1] : '未作答';
            document.getElementById('correctAnswer1').textContent = correctAnswers[1];
            
            document.getElementById('userAnswer2').textContent = userAnswers[2] !== null ? userAnswers[2] : '未作答';
            document.getElementById('correctAnswer2').textContent = correctAnswers[2];
            
            // 标记正确和错误的答案
            if (userAnswers[1] !== null) {
                const isCorrect1 = Math.abs(userAnswers[1] - correctAnswers[1]) < 0.1;
                document.getElementById('userAnswer1').className = isCorrect1 ? 'correct-answer' : 'incorrect-answer';
            }
            
            if (userAnswers[2] !== null) {
                const isCorrect2 = Math.abs(userAnswers[2] - correctAnswers[2]) < 0.1;
                document.getElementById('userAnswer2').className = isCorrect2 ? 'correct-answer' : 'incorrect-answer';
            }
            
            currentScene = 2.5; // 任务总结场景的特殊标识
            updateProgress();
        }
        
        // 继续到弧度制场景
        function continueToRadians() {
            document.getElementById('task12Summary').classList.remove('active');
            currentScene = 3;
            document.getElementById('scene3').classList.add('active');
            updateProgress();
        }
        
        // 显示结果图片
        function showResultImage(result) {
            const overlay = document.getElementById('resultOverlay');
            const image = document.getElementById('resultImage');
            
            if (result === 'success') {
                // 使用成功图片
                image.src = 'success_bg.jpg';
            } else {
                // 使用失败图片
                image.src = 'failure_bg.jpg';
            }
            
            overlay.style.display = 'flex';
        }
        
        // 关闭结果图片
        function closeResult() {
            const overlay = document.getElementById('resultOverlay');
            overlay.style.display = 'none';
        }
        
        // 切换到下一场景
        function nextScene(currentTaskNumber) {
            document.getElementById(`scene${currentScene}`).classList.remove('active');
            
            // 根据当前任务决定下一个场景
            if (currentTaskNumber === 1) {
                currentScene = 2; // 任务一完成后进入任务二
            } else if (currentTaskNumber === 2) {
                currentScene = 2.5; // 任务二完成后进入任务总结
            } else if (currentTaskNumber === 3) {
                currentScene = 5; // 任务三完成后进入任务四
            } else if (currentTaskNumber === 4) {
                currentScene = 6; // 任务四完成后进入总结
            }
            
            document.getElementById(`scene${currentScene}`).classList.add('active');
            updateProgress();
        }
        
        // 切换到弧度制场景
        function switchToRadians() {
            document.getElementById('scene3').classList.remove('active');
            currentScene = 4;
            document.getElementById('scene4').classList.add('active');
            updateProgress();
        }
        
        // 显示总结
        function showSummary() {
            document.getElementById('scene5').classList.remove('active');
            document.getElementById('summaryScene').classList.add('active');
            
            // 更新统计数据
            document.getElementById('completedTasks').textContent = `${completedTasks}/4`;
            document.getElementById('accuracyRate').textContent = `${Math.round((correctTasks / 4) * 100)}%`;
            
            // 填充所有任务的用户答案
            for (let i = 1; i <= 4; i++) {
                const userAnswerElement = document.getElementById(`finalUser${i}`);
                if (userAnswers[i] !== null) {
                    const isCorrect = Math.abs(userAnswers[i] - correctAnswers[i]) < 0.1;
                    userAnswerElement.textContent = i <= 2 ? `${userAnswers[i]}°` : `${userAnswers[i]} rad`;
                    userAnswerElement.className = `final-answer-value ${isCorrect ? 'correct-answer' : 'incorrect-answer'}`;
                } else {
                    userAnswerElement.textContent = '未作答';
                    userAnswerElement.className = 'final-answer-value incorrect-answer';
                }
            }
            
            currentScene = 6;
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const progressBar = document.getElementById('progress');
            const progressText = document.getElementById('progress-text');
            
            // 根据当前场景计算进度
            let progressPercentage = 0;
            
            if (currentScene === -1) {
                // 开场场景
                progressPercentage = 10;
                progressText.textContent = "0/5";
            } else if (currentScene === 0) {
                // 工程师编号输入场景
                progressPercentage = 0;
                progressText.textContent = "0/5";
            } else if (currentScene === 1) {
                // 场景一
                progressPercentage = 20;
                progressText.textContent = "1/5";
            } else if (currentScene === 2) {
                // 场景二
                progressPercentage = 40;
                progressText.textContent = "2/5";
            } else if (currentScene === 2.5) {
                // 任务一和任务二结算界面
                progressPercentage = 50;
                progressText.textContent = "2/5";
            } else if (currentScene === 3) {
                // 场景三
                progressPercentage = 60;
                progressText.textContent = "3/5";
            } else if (currentScene === 4) {
                // 场景四
                progressPercentage = 80;
                progressText.textContent = "4/5";
            } else if (currentScene === 5) {
                // 场景五
                progressPercentage = 100;
                progressText.textContent = "5/5";
            } else if (currentScene === 6) {
                // 总结场景
                progressPercentage = 100;
                progressText.textContent = "5/5";
            }
            
            progressBar.style.width = `${progressPercentage}%`;
        }
        
        // 重新开始游戏
        function restartGame() {
            // 重置所有状态
            currentScene = 0;
            completedTasks = 0;
            correctTasks = 0;
            
            // 重置用户答案
            for (let key in userAnswers) {
                userAnswers[key] = null;
            }
            
            // 重置输入框
            document.getElementById('angle1').value = '';
            document.getElementById('angle2').value = '';
            document.getElementById('angle3').value = '';
            document.getElementById('angle4').value = '';
            document.getElementById('engineerId').value = '';
            
            // 隐藏所有反馈
            document.getElementById('feedback1').style.display = 'none';
            document.getElementById('feedback2').style.display = 'none';
            document.getElementById('feedback3').style.display = 'none';
            document.getElementById('feedback4').style.display = 'none';
            
            // 切换到工程师编号输入场景
            document.getElementById('summaryScene').classList.remove('active');
            document.getElementById('engineerIdScene').classList.add('active');
            
            updateProgress();
        }
        
        // 初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>